<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card shadow="hover" class="mgb20" style="height: 252px;">
                    <div class="user-info">
                        <img :src="form.avatar" class="user-avator" alt />
                        <div class="user-info-cont">
                            <div class="user-info-name">{{ form.nickname }}</div>
                        </div>
                    </div>
                    <div class="user-info-list">
                        注册时间 ：
                        <span>{{form.registrationTime}}</span>
                    </div>
                    <div class="user-info-list">
                        居住地点 ：
                        <span>{{form.address}}</span>
                    </div>
                </el-card>
                <el-card shadow="hover" style="height: 80px;">
                    <div class="clock" >
                        <p class="date">{{ date }}</p>
                        <p class="time">{{ time }}</p>
                    </div>
                </el-card>
                <el-card shadow="hover" style="height: 252px;margin-top: 20px;">
                    <div slot="header" class="clearfix">
                        <span>数据比例</span>
                    </div>
                    留言 <el-progress :percentage="webInfo.messageCount" color="#42b983"></el-progress> 
                    资源 <el-progress :percentage="webInfo.resourceCount" color="#f1e05a"></el-progress>
                    友链 <el-progress :percentage="webInfo.linkCount"></el-progress>
                    评论 <el-progress :percentage="webInfo.comments" color="#00BFFF"></el-progress>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-row :gutter="20" class="mgb20">
                    <el-col :span="6">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-1">
                                <i class="el-icon-lx-people grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{count}}</div>
                                    <div>注册用户</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-2">
                                <i class="el-icon-view grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{webInfo.visits}}</div>
                                    <div>总访问量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-3">
                                <i class="el-icon-chat-line-round grid-con-icon" style="background:deepskyblue"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{webInfo.comments+webInfo.messageCount}}</div>
                                    <div>评论留言</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-3">
                                <i class="el-icon-folder grid-con-icon" style="background:tomato"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{webInfo.resourceCount}}</div>
                                    <div>资源数量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-card shadow="hover" >
                    <div slot="header" class="clearfix">
                        <span>图表展示</span>
                    </div>
                    <div class="con-item-two">
                        <div class="item-it" id="myChart" :style="{ width: '500px', height: '500px' }"></div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { getUserInfo } from '../../api/admin';
import { getWebInfo,getUserCount } from '../../api/web';
export default {
    name: 'dashboard',
    data() {
        return {
            count:0,
            webInfo:{},
            form:{},
            params: {
                uid: '',
                token: ''
            },
            time: '',
            date: ''
        }; 
    },
    created(){
        this.params.uid = this.$cookies.get('uid');
        this.params.token = this.$cookies.get('token');
         //查询个人信息
         getUserInfo(this.params).then(res => {
            if (res.code == 200) {
                this.form = res.data;
            }
        })
        getWebInfo().then(res => {
            if (res.code == 200) {
                this.webInfo = res.data;
            }
        })
        getUserCount().then(res => {
            if (res.code == 200) {
                this.count = res.data;
            }
        })
        this.time= setInterval(this.updateTime, 1000);
    },
    methods: {
        drawLine() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'));
            // 绘制图表
            myChart.setOption({
                legend: {},
                tooltip: {
                    trigger: 'axis',
                    showContent: false
                },
                dataset: {
                    source: [
                        ['product', '1月', '2月', '3月', '4月', '5月', '6月'],
                        ['留言', 56, 82, 88, 70, 53, 85],
                        ['评论', 51, 51, 55, 53, 73, 68],
                        ['资源', 40, 62, 69, 36, 45, 32],
                        ['友链', 25, 37, 41, 18, 33, 49]
                    ]
                },
                xAxis: { type: 'category' },
                yAxis: { gridIndex: 0 },
                grid: { top: '55%' },
                series: [
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '30%',
                    center: ['50%', '25%'],
                    emphasis: {
                    focus: 'self'
                    },
                    label: {
                    formatter: '{b}: {@2012} ({d}%)'
                    },
                    encode: {
                    itemName: 'product',
                    value: '2012',
                    tooltip: '2012'
                    }
                }
                ]
            });
            myChart.on('updateAxisPointer', function (event) {
            const xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
            const dimension = xAxisInfo.value + 1;
            myChart.setOption({
                series: {
                    id: 'pie',
                    label: {
                        formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                    },
                    encode: {
                        value: dimension,
                        tooltip: dimension
                    }
                }
            });
            }
    });
        },
        updateTime() {
            var cd = new Date();
            var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2);
            this.date = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth() + 1, 2) + '-' + this.zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
        },
        zeroPadding(num, digit) {
            var zero = '';
            for (var i = 0; i < digit; i++) {
                zero += '0';
            }
            return (zero + num).slice(-digit);
        }
    },
    mounted() {
        this.drawLine();
    },
};
</script>

<style scoped>
html,
body {
  height: 100%;
}

body {
  background: #0f3854;
  background: -webkit-radial-gradient(center ellipse, #0a2e38 0%, #000000 70%);
  background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
  background-size: 100%;
}

p {
  margin: 0;
  padding: 0;
}

.clock {
  font-family: 'Share Tech Mono', monospace;
  text-align: center;
  position: absolute;
  left: 15%;
  top:44%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #2D8CF0;
  text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
}

.clock .time {
  letter-spacing: 0.05em;
  font-size: 20px;
  padding: 5px 0;
}

.clock .date {
  letter-spacing: 0.1em;
  font-size: 24px;
}

.clock .text {
  letter-spacing: 0.1em;
  font-size: 12px;
  padding: 20px 0 0;
}
</style>
<style scoped>
.con-item-two {
    display: flex;
    margin-top: 30px;
    margin-bottom: -20px;
}
.item-it {
    flex: 1;
    margin-left: 5px;
}
.red {
    color: #ff0000;
}
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 10px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}
</style>
